<template>
	<div class="register">
		<img src="../../assets/logo.png" class="logo" alt="">
		<div class="dialog-view">
			<div class="menubar">
				注册申请
			</div>
			<div class="form-view">
				<el-form ref="form" :model="formData" label-width="180px" size="small">
					<el-form-item label="账号名称" required>
						<el-input v-model="formData.username" placeholder="请输入账号名称"></el-input>
					</el-form-item>
					<el-form-item label="账号密码" required>
						<el-input type="password" v-model="formData.password" placeholder="建议使用三种及三种以上的字符组合"></el-input>
					</el-form-item>
					<el-form-item label="集团名称" required>
						<el-select v-model="formData.groupId" placeholder="请选择集团名称" @change="groupChange"
							class="full-width">
							<el-option v-for="item in groupOptions" :key="item.deptId" :label="item.deptName"
								:value="item.deptId" />
						</el-select>
					</el-form-item>
					<el-form-item label="公司名称" required>
						<el-select v-model="formData.companyId" filterable placeholder="输入您的公司名称" style="width: 280px;">
							<el-option v-for="item in compOptions" :key="item.deptId" :label="item.deptName"
								:value="item.deptId">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="企业统一社会信用代码">
						<el-input v-model="formData.enterprise" placeholder="企业统一社会信用代码"></el-input>
					</el-form-item>
					<el-form-item label="姓名">
						<el-input v-model="formData.realName" placeholder="姓名"></el-input>
					</el-form-item>
					<el-form-item label="邮箱">
						<el-input v-model="formData.email" placeholder="邮箱"></el-input>
					</el-form-item>
					<el-form-item label="手机号码">
						<el-input v-model="formData.phonenumber" placeholder="手机号码"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">注册</el-button>
						<el-button @click="cancel">取消</el-button>
					</el-form-item>
				</el-form>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formData: {},
				groupOptions: {},
				compOptions: {}
			}
		},
		created() {
			this.loadGroupOptions()
			/* this.optionsdata() */
		},
		methods: {
			onSubmit(r) {
				this.$http({
					url: '/api/register',
					method: 'post',
					data: this.formData,
				}).then(res => {
					this.$message({
						message: '注册成功',
						type: 'success'
					});
					this.$router.push('/home')
				}).catch(err => {
					return
				})
			},
			cancel() {
				this.$router.push('/home')
			},
			groupChange(e) { //集团下拉切换
				this.$http({
					url: '/api/getlist/company',
					method: 'POST',
					data: {
						deptId: this.formData.groupId,
					},
				}).then(res => {
					this.compOptions = res.data.data;
				})
			},
			loadGroupOptions() {
				this.$http({
					url: '/api/getlist/group',
					method: 'GET'
				}).then(res => {
					this.groupOptions = res.data.data;
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.register {
		height: 100%;
		background: url('../../assets/img/bg.jpeg');
		background-size: cover;
		position: relative;

		.logo {
			margin: 20px;
			height: 40px;
		}

		.dialog-view {
			width: 700px;
			min-height: 400px;
			background-color: white;
			border-radius: 6px;
			position: absolute;
			left: 100px;
			top: 20%;
			overflow: hidden;

			.menubar {
				height: 50px;
				line-height: 50px;
				background-color: #ddd;
				text-align: center;
				font-size: 24px;
			}

			.form-view {
				width: 500px;
				margin: auto;
				box-sizing: border-box;
				padding: 20px;
			}
		}
	}

	.full-width {
		width: 100%;
	}
</style>
